import React, {useEffect, useRef, useState} from 'react'
import {Button, Divider, Space, Table, Form, Tag, Popconfirm} from 'antd';
import {FormInstance} from 'antd/lib/form'
import styles from './index.module.scss';
import {ColumnsType} from "antd/lib/table";
import {IPageResponse, IParam, statusEnum} from "@/common/common";
import {apiGetUserList} from "@/apis/user";
import {apiGetCornTaskList} from "@/apis/opt";
import {
  CaretRightOutlined,
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  FundProjectionScreenOutlined,
  PlusOutlined
} from '@ant-design/icons'

/**
 * 定时任务
 */
const Job: React.FC<any> = () => {

  // const acForm = useRef<ActionType>()
  const [form] = Form.useForm<FormInstance>()
  const formRef = useRef<FormInstance>()

  const [loading, setLoading] = useState<boolean>(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 显示Modal
  const [modal, setModal] = useState<{ title: string, visible: boolean }>({title: ``, visible: false})
  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    setLoading(true);
    apiGetCornTaskList(true).then((res: any) => {
      setPageResponse(res);
    }).finally(() => setLoading(false));
  }, [params]);

  const columns: ColumnsType<any> = [
    {
      title: '任务名称',
      key: 'jobName',
      dataIndex: 'jobName',
      align: "center",
    },
    {
      title: '任务组',
      key: 'jobGroup',
      dataIndex: 'jobGroup',
      align: "center",
    },
    {
      title: 'cron执行表达式',
      key: 'cron',
      dataIndex: 'cron',
      align: "center",
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      align: "center",
      render: (value: string, record: any) => {
        const element = statusEnum[value]
        return element && <Tag color={element.color} key={record.id}>{element.text}</Tag>
      }
    },
    {
      title: '操作',
      key: 'option',
      dataIndex: 'option',
      align: "center",
      render: (text: any, record: any) => (
        <>
          <Button
            type="primary"
            size="small"
            onClick={() => {
            }}
          >
            编辑
          </Button>
          <Divider type="vertical"/>
          <Button
            type="primary"
            danger
            size="small"
            onClick={() => {
            }}
          >
            删除
          </Button>
        </>
      )
    },
  ]

  const refRemove = async (jobIds: (string | number)[] | undefined) => {

  }

  const renderToolBar = () => {
    return (
      <Space size={10}>
        <Button type="primary" onClick={() => setModal({title: "新增", visible: true})}>
          <PlusOutlined/>新增
        </Button>
        <Popconfirm
          disabled={selectedRowKeys.length <= 0}
          onConfirm={() => refRemove(selectedRowKeys)}
          title="是否删除选中数据"
        >
          <Button disabled={selectedRowKeys.length <= 0} type="primary" danger>
            <DeleteOutlined/>
            批量删除
          </Button>
        </Popconfirm>
        <Popconfirm
          title="是否导出数据"
        /*  onConfirm={() => {
            exportExcel({
              ...formRef.current?.getFieldsValue()
            })
          }}*/
        >
          <Button type="default">
            <FundProjectionScreenOutlined/>导出数据
          </Button>
        </Popconfirm>
      </Space>
    )
  }

  return (
    <div className={styles.container}>
      <div className={styles.toolBar}>{renderToolBar()}</div>
      <Table
        rowKey={"id"}
        columns={columns}
        dataSource={pageResponse.data || []}
        pagination={{
          current: pageResponse.pageInfo.page || 0,
          pageSize: pageResponse.pageInfo.size || 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ["10", "20", "30"],
          total: pageResponse.pageInfo.total || 0,
          showTotal: (total) => `共 ${total} 条`,
          onChange: (pageNo, pageSize) => {
            setParams({...params, ...{page: pageNo, size: pageSize}})
          }
        }}
      />
    </div>
  )
}

export default Job
